<template>
  <div>
    <div class="picture">
      <span>账户管理</span>

      <router-link :to="{name: 'zhanghugl'}">
        <img src="../../assets/img/kefufankui/information/youjiantou.png" height="18" width="10"/>
      </router-link>
    </div>

    <!---->
    <div class="second">
      <span>修改登录密码</span>
      <router-link :to="{name: 'xiugai'}">
        <img src="../../assets/img/kefufankui/information/youjiantou.png" height="18" width="10"/>
      </router-link>
    </div>
    <!---->
    <div @click="remove" class="third">
      <span>清除缓存</span>

        <!--<img src="../../assets/img/kefufankui/information/youjiantou.png"/>-->
        <span  v-show="isOpen">10KB</span>
        <span v-show="isOpe">0KB</span>

    </div>
    <!---->
    <div class="four">
      <span>阿拉灯平台</span>
      <router-link :to="{name: 'invite'}">
        <img src="../../assets/img/kefufankui/information/youjiantou.png" height="18" width="10"/>
      </router-link>
    </div>
    <!---->
    <div class="five">
      <span>个人委托协议</span>

      <router-link :to="{name: 'phone'}">
        <img  src="../../assets/img/kefufankui/information/youjiantou.png" height="18" width="10"/>
      </router-link>
    </div>
    <!---->
    <div class="six">
      <span>检查更新</span>
      <router-link :to="{name: 'phone'}">
        <img  src="../../assets/img/kefufankui/information/youjiantou.png" height="18" width="10"/>
      </router-link>
    </div>

    <!--缓存弹窗-->
    <div class="window" v-show="cancell" >
      <p>确认清除缓存 ?</p>
      <div class="qu">
        <!--v-show="hidden"-->
      <span @click="cancel" >取消</span>
      <span @click="confirm">确认</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        isOpen: true,
        isOpe: false,
        cancell:false,
//        hidden: false
      }

    },
    methods:{

      jump(){
        this.$router.push({path: '/jiainformation/code'});
      },
      remove(){
        this.cancell =! this.cancell ;
      },
      confirm(){
        this.cancell =! this.cancell ;
        this.isOpen =! this.isOpen ;
        this.isOpe =! this.isOpe;
      },
      cancel(){
        this.cancell =! this.cancell;
      }

    }
  }
</script>
<style scoped>
  .picture{
    vertical-align: center;
  }
  .picture span{
    font-size:0.6rem;
    color: #4d4d4d;
  }
  .picture span{
    font-size:0.6rem;
    margin-left: 0.9rem;
    color: #4d4d4d;
  }
  .picture img:nth-child(2){
    width: 2rem;
    height: 2rem;
    margin-left: 9rem;
    padding-top: 0.1rem;
    color: #4d4d4d;
  }
  .picture img:nth-child(1){
    margin-left: 10.2rem;
  }
  .second span:nth-child(1){
    font-size:0.6rem;
    padding-left: 1rem;
    color: #4d4d4d;
  }
  .second span:nth-child(2){
    margin-left: 9.3rem;
    font-size:0.6rem;
    color: #4d4d4d;
  }
  .second img:nth-child(1){
    margin-left: 9rem;
  }
  /*third*/
  .third span:nth-child(1){
    font-size:0.6rem;
    margin-left: 0.9rem;
    margin-right: 8.5rem;
  }
  .third span:nth-child(2){
    font-size:0.6rem;
    padding-left: 1rem;
    color: #4d4d4d;
  }
  .third span:nth-child(3){
    font-size:0.6rem;
    padding-left: 1rem;
  }
  .four span{
    font-size:0.6rem;
    margin-left: 0.9rem;
  }
  .four img{
    margin-left: 9.8rem;
  }
  .five span{
    font-size:0.6rem;
    margin-left: 0.8rem;

  }
  .five img:nth-child(1){
    margin-left: 9.3rem;
  }
  .six span{
    font-size:0.6rem;
    margin-left: 0.8rem;
  }
  .six img:nth-child(1){
    margin-left: 10.4rem;

  }
  /*弹窗部分*/
  .window{
    width: 8rem;
    height: 4rem;
    background: aliceblue;
    /*text-align: center;*/
    font-size:0.6rem;
    margin: 0 auto;
  }
  .window p{
    margin-left: 1.9rem;
    padding-top: 1rem;
    color: #4d4d4d;
    /*border-bottom: 1px solid #4d4d4d;*/
  }
  .window span{
    padding-left: 1.9rem;

  }
  .qu{
    margin-top: 0.7rem;
  }
  .qu span:nth-child(1){
    color: #4d4d4d;

  }
  .qu span:nth-child(2){
    color: #e53e42;

    /*border-left:1px solid #4d4d4d;*/
  }
  /*动画*/
  .fade-enter,.fade-leave-to{
    transform: translateX(100%);
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 0.1s;
  }

</style>

